<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文章 - 回声网络</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }
        body { background-color: #f5f7fa; }
        /* 顶部导航栏 */
        .nav { width: 100%; height: 60px; background-color: #2c3e50; display: flex; align-items: center; padding: 0 50px; }
        .nav-logo { color: white; font-size: 22px; font-weight: bold; text-decoration: none; margin-right: 50px; }
        .nav-menu { display: flex; gap: 30px; }
        .nav-menu a { color: #ecf0f1; text-decoration: none; font-size: 16px; }
        .nav-menu a:hover { color: #3498db; }
        .nav-user { margin-left: auto; color: white; display: flex; align-items: center; gap: 15px; }
        .nav-user a { color: white; text-decoration: none; }
        /* 文章列表容器 */
        .articles-container { width: 1000px; margin: 50px auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
        /* 页面标题 */
        .page-header { background-color: #3498db; padding: 30px 50px; color: white; }
        .page-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
        .page-subtitle { font-size: 14px; opacity: 0.8; }
        /* 文章列表内容 */
        .articles-content { padding: 30px 50px; }
        /* 文章卡片 */
        .article-card { border: 1px solid #eee; border-radius: 8px; padding: 25px; margin-bottom: 20px; transition: box-shadow 0.3s ease; }
        .article-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .article-title { font-size: 20px; margin-bottom: 10px; }
        .article-title a { text-decoration: none; color: #333; }
        .article-title a:hover { color: #007bff; }
        .article-meta { color: #666; font-size: 14px; margin-bottom: 15px; }
        .article-excerpt { color: #555; line-height: 1.6; margin-bottom: 15px; }
        .article-actions { display: flex; gap: 15px; }
        .btn-edit, .btn-delete { padding: 6px 16px; border-radius: 4px; text-decoration: none; font-size: 14px; cursor: pointer; border: none; }
        .btn-edit { background: #3498db; color: white; }
        .btn-edit:hover { background: #2980b9; }
        .btn-delete { background: #e74c3c; color: white; }
        .btn-delete:hover { background: #c0392b; }
        /* 空状态 */
        .empty-state { text-align: center; padding: 80px 0; color: #666; }
        .empty-state-icon { font-size: 60px; margin-bottom: 20px; opacity: 0.2; }
        .empty-state-text { font-size: 18px; margin-bottom: 20px; }
        .btn-publish { display: inline-block; padding: 10px 30px; background-color: #28a745; color: white; border-radius: 4px; text-decoration: none; font-size: 16px; }
        .btn-publish:hover { background-color: #218838; }
        /* 错误提示 */
        .error-container { text-align: center; padding: 100px 0; color: #e74c3c; font-size: 18px; }
        .btn-back { display: inline-block; margin-top: 20px; padding: 10px 25px; background-color: #2c3e50; color: white; border-radius: 4px; text-decoration: none; }
        
        /* 成功提示 */
        .success-message { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background-color: #28a745; color: white; padding: 12px 30px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1000; animation: slideDown 0.3s ease-out; }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
    </style>
</head>
<body>
<!-- 成功提示消息 -->
<div class="success-message" th:if="${successMsg != null}" th:text="${successMsg}"></div>

<!-- 顶部导航栏 -->
<nav class="nav">
    <a href="/echo-network/article-list" class="nav-logo">回声网络</a >
    <div class="nav-menu">
        <a href="/echo-network/article-list">首页</a >
        <a href="/echo-network/article-publish">发布文章</a >
        <a href="/echo-network/profile-show">个人中心</a >
    </div>
    <div class="nav-user" th:if="${session.loginUser != null}">
        <span th:text="${session.loginUser.nickname}"></span>
    </div>
    <div class="nav-user" th:if="${session.loginUser == null}">
        <a href="/echo-network/login.html">重新登录</a >
    </div>
</nav>

<!-- 已登录：展示我的文章 -->
<div class="articles-container" th:if="${session.loginUser != null}">
    <div class="page-header">
        <h1 class="page-title">我的文章</h1>
        <div class="page-subtitle">管理你发布的所有文章</div>
    </div>
    
    <div class="articles-content">
        <!-- 文章列表 -->
        <div th:each="article : ${articles}">
            <div class="article-card">
                <div class="article-title">
                    <a th:href="'/echo-network/article-detail?id=' + ${article.id}" th:text="${article.title}"></a >
                </div>
                <div class="article-meta">
                    发布时间：<span th:text="${article.createTime}"></span> ·
                    浏览量：<span th:text="${article.viewCount}"></span>
                </div>
                <div class="article-excerpt" th:text="${article.content}"></div>
                <div class="article-actions">
                    <a th:href="'/echo-network/article-edit?id=' + ${article.id}" class="btn-edit">编辑</a >
                    <button th:attr="data-id=${article.id}" class="btn-delete" onclick="confirmDelete(this)">删除</button>
                </div>
            </div>
        </div>
        
        <!-- 空状态提示 -->
        <div class="empty-state" th:if="${articles == null or articles.isEmpty()}">
            <div class="empty-state-icon">📝</div>
            <div class="empty-state-text">你还没有发布过任何文章</div>
            <a href="/echo-network/article-publish" class="btn-publish">立即发布第一篇文章</a >
        </div>
    </div>
</div>

<!-- 未登录：显示错误提示 -->
<div class="error-container" th:if="${session.loginUser == null}">
    <p>请先登录后查看我的文章</p >
    <a href="/echo-network/login.html" class="btn-back">前往登录</a >
</div>

<script>
    // 成功提示自动消失
    document.addEventListener('DOMContentLoaded', function() {
        const successMessage = document.querySelector('.success-message');
        if (successMessage) {
            setTimeout(() => {
                successMessage.style.opacity = '0';
                successMessage.style.transform = 'translateX(-50%) translateY(-20px)';
                successMessage.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
                setTimeout(() => {
                    successMessage.style.display = 'none';
                }, 300);
            }, 3000);
        }
    });
    
    // 确认注销
    function confirmLogout(event) {
        event.preventDefault();
        
        if (confirm('确定要注销当前账号吗？')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/echo-network/logout';
            form.style.display = 'none';
            document.body.appendChild(form);
            form.submit();
        }
    }
    
    // 确认删除文章
    function confirmDelete(button) {
        const articleId = button.getAttribute('data-id');
        
        if (confirm('确定要删除这篇文章吗？删除后无法恢复。')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/echo-network/deleteArticle';
            form.style.display = 'none';
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'id';
            input.value = articleId;
            
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
</body>
</html>